import React from 'react';
import SnapCarousel, { AdditionalParallaxProps, ParallaxImage, Pagination } from 'react-native-snap-carousel';
import { viewportWidth, wp, hp } from '@/utils/index'
import { StyleSheet, View } from 'react-native';
import { ICarousel } from '@/models/home';
import { connect, ConnectedProps } from 'react-redux';
import { RootState } from '@/models/index';

const mapStateToProps = ({ home }: RootState) => {
    return {
        data: home.carousels,
        activeCarouselIndex: home.activeCarouselIndex,
    };
};

type ModelState = ConnectedProps<typeof connector>;
interface IProps extends ModelState { }
const connector = connect(mapStateToProps);

const sliderWidth = viewportWidth;
const sideWidth = wp(90);
export const sideHeight = hp(26);
const itemWidth = sideWidth + wp(2) * 2;


function Carousel(props: IProps) {
    const { data, activeCarouselIndex } = props;

    const renderItem = ({ item }: { item: ICarousel }, parallaxProps?: AdditionalParallaxProps) => {
        return <ParallaxImage
            style={styles.image}
            containerStyle={styles.imageContainer}
            {...parallaxProps}
            parallaxFactor={0.8}
            showSpinner
            spinnerColor="rgba(0,0,0,0.25)"
            source={{
                uri: item.image
            }}
        />
    }

    const onSnapToItem = (index: number) => {
        const { dispatch } = props;
        dispatch({
            type: 'home/setState',
            payload: {
                activeCarouselIndex: index,
            },
        });
    }
    return <View>
        <SnapCarousel
            data={data}
            renderItem={renderItem}
            sliderWidth={sliderWidth}
            itemWidth={itemWidth}
            hasParallaxImages={true}
            onSnapToItem={onSnapToItem}
            loop
            autoplay
        />
        <View style={styles.paginationWrapper}>
            <Pagination
                containerStyle={styles.paginationContainer}
                dotContainerStyle={styles.dotContainer}
                dotStyle={styles.dot}
                activeDotIndex={activeCarouselIndex}
                dotsLength={data.length}
            />
        </View>
    </View>
}

const styles = StyleSheet.create({
    imageContainer: {
        width: itemWidth,
        height: sideHeight,
        borderRadius: 8,
    },
    image: {
        ...StyleSheet.absoluteFillObject,
        resizeMode: 'cover',
    },
    paginationWrapper: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    paginationContainer: {
        position: 'absolute',
        top: -20,
        backgroundColor: 'rgba(0, 0, 0, 0.35)',
        paddingHorizontal: 3,
        paddingVertical: 4,
        borderRadius: 8,
    },
    dotContainer: {
        marginHorizontal: 6,
    },
    dot: {
        width: 6,
        height: 6,
        borderRadius: 3,
        backgroundColor: 'rgba(255, 255, 255, 0.92)',
    },
});

export default connector(Carousel);